<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <img :src="item.coverImage | dalImg" alt="" class="s-img" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="item in categories"
        :key="item.id"
        :icon="item.coverImage | dalImg"
        :text="item.name"
        :to="{ name: 'List', query: { t: item.id } }"
      />
    </van-grid>
    <van-card
      v-for="(item, index) in products"
      :key="item.id"
      :num="item.amount"
      :tag="index + 1 + ''"
      :price="item.price.toFixed(2)"
      desc="商品描述"
      :title="item.name"
      :thumb="item.coverImage | dalImg"
      :origin-price="(item.price * 1.2).toFixed(2)"
      @click-thumb="toDetail(item)"
    />
  </div>
</template>

<script>
import { loadBannersAPI } from "../service/banners";
import { loadCategoriesAPI } from "../service/categories";
import { loadProductsAPI } from "../service/products";
export default {
  name: "HomeView",
  data() {
    return {
      banners: [],
      categories: [],
      products: [],
    };
  },
  components: {},
  created() {
    this.loadBanners();
    this.loadCategories();
  },
  methods: {
    // 获取轮播图
    async loadBanners() {
      const banners = await loadBannersAPI();
      this.banners = banners.data;
    },
    // 获取商品分类
    async loadCategories() {
      const categories = await loadCategoriesAPI();
      this.categories = categories.data;
      const products = await loadProductsAPI();
      this.products = products.data;
    },
    //  跳转到详情页
    toDetail(item) {
      this.$router.push({
        name: "Detail",
        params: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style scoped>
.my-swipe {
  width: 100vw;
  height: 50vw;
}
.s-img {
  width: 100%;
}
</style>
